<template>
  <div class="listen-item">
    <div class="item-header" v-if="hasHeader">
      {{ name }}
      <button class="item-delete" @click="onDelete">X</button>
    </div>
    <div class="item-content">

        <div class="message" v-for="(msg, i) in messageList" :key="i">
          <span class="index">{{ i }}</span>
          <span>{{ msg }}</span>
        </div>

    </div>
  </div>
</template>


<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator";


@Component({
  name: 'ShowIndexPage',
  components: {}
})
export default class extends Vue {
  @Prop({default: true}) hasHeader!: boolean;
  @Prop({default: 'a listener'}) name!: string;
  @Prop({default: []}) messageList!: string[];


  private onDelete() {
    this.$emit('delete', this.name)
  }


}
</script>


<style scoped>

.listen-item {
  border: 1px solid lightgray;
  margin-right: 5px;
}
.item-header {
  height: 30px;
  line-height: 30px;
  background-color: lightgray;
  text-align: center;
  position: relative;
}
.item-delete {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  /*border: none;*/
}

.item-content {
  flex: 1;
  padding: 10px;
}

.message {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.index {
  min-width: 30px;
  opacity: 0.6;
}
</style>
